// pages/video/video.js
import request from '../../utils/request'
Page({
  // 1. 获取视频标签导航项
  async getNavListData() {
    const result = await request({
      url: '/video/group/list'
    })
    if (result.code === 200) {
      this.setData({
        navList: result.data.slice(0, 20),
        navId: result.data[0].id
      })

      // 再获取视频列表数据
      this.getVideoListData()
    }
  },
  // 2. 更改navId的值 实现单击切换
  changeNavId(e) {
    // console.log('aa', e)
    this.setData({
      navId: e.target.dataset.id
    })
    this.getVideoListData()
  },
  // 3. 获取对应标签项下面的视频列表数据
  async getVideoListData() {
    const {
      navId: id
    } = this.data
    const result = await request({
      url: '/video/group',
      data: {
        id
      }
    })
    // console.log('bb', result)
    if (result.code === 200) {
      this.setData({
        videoList: result.datas.map(item => item.data),
        isTriggered: false // 下拉刷新完成 再恢复正常
      })
    }
  },
  // 4. 控制视频只有一个播放
  handlerPlayOrPause(e) {
    // console.log('vv', e)
    // 单击的视频播放的情况分析
    //一. 首次单击时 肯定是单击哪一个就让哪一个进行播放
    //二. 非首次单击或再次单击 
    // 2.1 注意：不一定是第2次 也可能是第3次 第6次单击
    // 2.2 此时又分两种 一种是单击的同一个视频 另一种是新的视频

    // 4.1 获取vid 用来创建播放器上下文对象
    const videoId = e.target.id
    // 4.2 将此vid存储起来 后续会用到  判断是否单击的是同一个视频时会用到
    this.setData({
      videoId
    })
    // 4.3 判断是否是首次单击  我们将自己创建的播放器上下文对象存储到this.player
    if (!this.player) {
      // 4.4 既然是第1次单击 就应该先创建播放器上下文对象
      this.player = wx.createVideoContext(this.data.videoId)
      // 4.5 让当前视频播放  用播放器上下文对象来控制视频的播放
      this.player.play()
      // 4.6 将当前视频的vid 再存一份 是为了后面做判断是不是同一个视频
      this.vid = this.data.videoId
      // 4.7 再保存一下当前视频的播放状态 
      this.playStatus = true // true 表示播放 false 暂停
    } else {
      // 非首次单击或再次单击 又分两种情况 一种是单击的同一个视频 另一种是非同一个
      // 4.8 需要判断一下 单击的是不是同一个视频
      if (this.vid === this.data.videoId) {
        // 判断一下当前视频是播放还是暂停状态
        if (this.playStatus) {
          this.player.pause() // 暂停播放
          this.playStatus = false // 更新播放状态 
        } else {
          this.player.play() // 播放
          this.playStatus = true // 更新播放状态
        }
      } else {
        // 说明非同一个视频  也就是单击了另一个视频
        // 4.9 此时单击的是另一个视频 
        // 先让上一个暂停
        this.player.pause()
        // 根据当前被单击的视频vid 重新创建播放器上下文对象  此处体现了单例模式
        this.player = wx.createVideoContext(this.data.videoId)

        // 在此处加两行代码，是让当前视频从之前的位置继续向后播放
        const currentVideo = this.data.recordList.find(item => item.vid === this.data.videoId)
        // if (currentVideo) {
        //   this.player.seek(currentVideo.currentTime)
        // }
        currentVideo && this.player.seek(currentVideo.currentTime)
        //  让当前视频播放  用播放器上下文对象来控制视频的播放
        this.player.play()
        //  将当前视频的vid 再存一份 是为了后面做判断是不是同一个视频
        this.vid = this.data.videoId
        //  再保存一下当前视频的播放状态 
        this.playStatus = true // true 表示播放 false 暂停
      }
    }
  },
  // 5. 收集视频的播放时长
  handlerTimeupdate(e) {
    // console.log('ee', e)
    // 5.1 先获取一下数组
    const recordList = this.data.recordList
    // 5.2 查找一下当前视频是否记录过
    let currentVideo = recordList.find(item => item.vid === this.data.videoId)
    // 5.3 判断一下是否有此视频
    if (currentVideo) {
      // 更新一下当前视频的时长
      currentVideo.currentTime = e.detail.currentTime
    } else {
      // 此处 说明之前没有存储过此视频
      currentVideo = {
        vid: this.data.videoId,
        currentTime: e.detail.currentTime
      }
      recordList.push(currentVideo)
    }
    // 更新回data当中
    this.setData({
      recordList
    })
  },
  // 6. 播放完成 要及时删除播放过的视频
  handlerEnded() {
    // console.log('当前视频播放完成了...')
    // 6.1 先获取一下数组
    const {
      recordList
    } = this.data
    // 6.2 从数组中查找一下当前的视频
    const index = recordList.findIndex(item => item.vid === this.data.videoId)
    // 6.3 删除当前视频
    index !== -1 && recordList.splice(index, 1)
    // 6.4 更新回去
    this.setData({
      recordList
    })
  },
  // 7. 开启下拉刷新
  handlerRefresherrefresh() {
    // console.log('下拉刷新了...')
    this.setData({
      isTriggered: true // 开启下拉刷新
    })

    // 重新发送请求 获取最新的当前标签项下面的视频列表
    this.getVideoListData()
  },
  // 8. 上拉重新加载新项
  handlerScrolltolower() {
    // 8.1 获取一下视频列表
    let videoList = this.data.videoList
    // 8.2 模拟发送请求 再加载8个
    const newVideoList = videoList.slice(0, 8)
    // 8.3 添加到videoList当中
    videoList = [...videoList, ...newVideoList]
    // 8.4 判断一下个数，不要超过40个
    if (videoList.length > 40) return wx.showToast({
      title: '别拉了，到底了...',
      icon: 'none'
    })
    // 8.5 将数据更新回去
    this.setData({
      videoList
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    navList: [], // 导航标签项数组
    navId: 0, // 标签项的id
    videoList: [], // 视频列表数组
    videoId: '', // 存储当前视频的vid 始终是当前正在被单击的视频的vid
    recordList: [], // 收集播放视频的时长 里面的对象有两个属性 currentTime vid
    isTriggered: false // 是否开启下拉刷新
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getNavListData()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({
    from
  }) {
    // console.log('用户分享内容了...', obj)
    if (from === 'button') {
      return {
        title: '演唱会视频',
        path: '/pages/video/video',
        imageUrl: '/static/images/lyml.jpg'
      }
    } else {
      return {
        title: '演唱会视频112233',
        path: '/pages/home/home',
        imageUrl: '/static/images/logo.png'
      }
    }
  }
})